<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/321.css">
	<style type="text/css">
	  .ding{
	  	width: 360px;
	  	height: 480px;
	  	min-height: 480px;
	  	border: 1px solid #ccc;
	  	margin: 50px auto;
	  	border-radius: 10px;
	  
	  }
	  .yu{
	  	background-color: #FF8C00;
	  	color: 	#FFFFE0;
	  	height: 40px;
	  	text-align: center;
	    line-height: 40px;
        border-radius: 10px;
	  	}
	  	.yu h4{
	  		margin: 0px;

	  	}
	  	 .rer button{

       	margin: 10px 10px;
       	background-color:#FF8C00; 
       	height: 30px;
       	line-height: 30px;
       	color: #fff;
       	border-radius: 10px;


       }







</style>

</head>
<body>
	<div class="ding">
		<div  class="yu">
			<h4>请选择省份</h4> 
			<div class="rer">
   	 		 <button>广西壮族自治区</button>
   	 		 <button>广东</button>
   	 		 <button>上海</button>
   	 		 <button>天津</button>
   	 </div>
   	 <div class="rerq" style="display: none;">
   	 		 <button>南宁市</button>
   	 		 <button>柳州市</button>
   	 		 <button>广州市</button>
   	 		 <button>深圳市</button>
   	 		 <button>长沙市</button>
   	 		 <button>张家界市</button>
   	 		 <button>南昌</button>
   	 		 <button>九江</button>
   	 </div>
   	 <div class="rert" style="display: none;">
   	 		 <button>青秀区</button>
   	 		 <button>琅东区</button>
   	 		 <button>城中区</button>
   	 		 <button>鱼峰区</button>
   	 		 <button>越秀区</button>
   	 		 <button>荔湾区</button>
   	 		 <button>福田区</button>
   	 		 <button>罗湖区</button>
   	 		 <button>城东区</button>
   	 		 <button>城南区</button>
   	 		 <button>永定区</button>
   	 		 <button>武陵源区</button>
   	 		 <button>东湖区</button>
   	 		 <button>西湖区</button>
   	 		 <button>浔阳区</button>
   	 		 <button>濂溪区</button>
   	 </div>
     
   </div>


		</div>

</div>
  
  <script type="text/javascript" src="js/123.js"> </script>
  <script type="text/javascript">

$('.iconfont').click(function(){
    var city=$('.city').css('display');
    var areaw=$('.area').css('display');
    if(areaw=='block'){
         $(".province").show();
         $(".city").show();
         $(".area").hide();
    }
    if(city=='block' && areaw=='none'){
         $(".province").show();
         $(".city").hide();
         $(".area").hide();
    }

  });
function showarea(btn){
    var cid=$(btn).val();
    $(".area").show();
    $(".area").empty();
  $.get("data/areaw.json",function(res){
       
       for(var i=0;i<res.length;i++){

        if(cid==res[i].pid){
        var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';

        $(".area").append(btn);
          }

       }
  })
}
function Initprovince(){
  $(".province").empty();
  $.get("data/province.json",function(res){
    for(var i=0;i<res.length;i++){        
      var btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
      $(".province").append(btn);   
    }
  });
}







  </script>


	

	
	
</body>
</html>